<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="es" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="es" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="es" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>SAI - Sistema de Administración Interno de Clases Online</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <style>
            body {
                padding:120px 40px 40px 40px;
            }
            
            body > form {
                max-width:960px;
                margin:auto;
            }
            
            body > form > section {
                margin-bottom:50px;
            }
            
            pre {
                border-radius:3px;
                overflow:hidden;
            }
            
            body > nav {
                position:fixed;
                z-index:10;
                top:0;
                left:0;
                width:100%;
                padding:10px 40px;
                text-align:center;
                background-color:#f7f7f7;
                border-bottom:1px solid #dedede;
                box-sizing:border-box;
                box-shadow:0 1px 3px rgba(0,0,0,0.1);
            }
            
            body > nav > a {
                margin-right:5px;
                margin-bottom:5px;
            }
            
            section {
                padding:20px 0;
                border-bottom:1px solid #dedede;
                margin-bottom:80px;
            }
            
            section > h2 {
                text-transform:uppercase;
            }
            
            .square {
                border:1px solid #b5b5b5;
                padding:20px;
                float:left;
                margin-right:10px;
                text-shadow:none;
                text-align:center;
            }
        </style>
        
        <link rel="stylesheet" href="styles/normalize.css">
        <link rel="stylesheet" href="styles/main.css">
        <link rel="stylesheet" href="styles/common.css">
        <link rel="stylesheet" href="styles/prism.css">
        
        <script src="scripts/vendor/modernizr-2.6.2.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="scripts/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="scripts/plugins.js"></script>
        <script src="scripts/main.js"></script>
        <script src="scripts/prism.js"></script>
        
        <script>
            $(document).ready(function()
            {
                $("body > section").each(function(i,value){
                    var section = $(value);
                    var title   = section.children("h2").text();
                    var id      = title.replace(/^[^a-z]+|[^\w:.-]+/gi, "");
                    
                    section.attr("id", id);
                    
                    var a = $("<a href='#" + id + "' class='button'>" + title + "</a>");
                        a.click(function(e){
                            e.preventDefault();
                            var $link = $(this);
                            var anchor = $link.attr("href");
                            $("html, body").stop().animate({
                                scrollTop: $(anchor).offset().top - 60
                            }, 1000);
                        });
    
                    $("nav").append(a);
                });
                
            });
        </script>
        
    </head>
    <body>
        <h1>Elementos de formulario</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
        </p>
        
        <nav>
        </nav>
        
        <section>
            <h2>Colores</h2>
            <div class="clearfix">
                <div class="square" style="background-color:#4288de">4288de</div>
                <div class="square" style="background-color:#de4242">de4242</div>
                <div class="square" style="background-color:#ffff73">ffff73</div>
            </div>
            <h4>Escala de grises</h4>
            <div class="clearfix">
                <div class="square" style="background-color:#fff">fff</div>
                <div class="square" style="background-color:#f7f7f7">f7f7f7</div>
                <div class="square" style="background-color:#dedede">dedede</div>
                <div class="square" style="background-color:#b5b5b5">b5b5b5</div>
                <div class="square" style="background-color:#8f8f8f">8f8f8f</div>
                <div class="square" style="background-color:#5d5d5d">5d5d5d</div>
                <div class="square" style="background-color:#313131">313131</div>
            </div>
        </section>
        
        
        <section>
            <h2>Botones</h2>
            <div>
                <button type="button" class="button">Cualquier texto</button>
                <button type="button" class="button important">Cualquier texto</button>
                <button type="button" class="button important red">Cualquier texto</button>
                <button type="button" class="button important blue">Cualquier texto</button>
                <button type="button" class="button important blue"><span class="icon check"></span> Cualquier texto</button>
                <button type="button" class="button important blue"><span class="icon check"></span></button><br>
                <br>
                <button type="button" class="button selected">Cualquier texto</button>
                <button type="button" class="button important selected">Cualquier texto</button>
                <button type="button" class="button important red selected">Cualquier texto</button>
                <button type="button" class="button important blue selected">Cualquier texto</button>
                <button type="button" class="button important blue selected"><span class="icon check"></span> Cualquier texto</button>
                <button type="button" class="button important blue selected"><span class="icon check"></span></button><br>
                <br>
                <button type="button" class="button disabled">Cualquier texto</button>
                <button type="button" class="button important disabled">Cualquier texto</button>
                <button type="button" class="button important red disabled">Cualquier texto</button>
                <button type="button" class="button important blue disabled">Cualquier texto</button>
                <button type="button" class="button important blue disabled"><span class="icon check"></span> Cualquier texto</button>
                <button type="button" class="button important blue disabled"><span class="icon check"></span></button><br>
                <br>
                <div class="button-group">
                    <button type="button" class="button">Acción A</button>
                    <button type="button" class="button">Acción B</button>
                    <button type="button" class="button">Acción C</button>
                    <button type="button" class="button">Botón seleccionado</button>
                    <button type="button" class="button"><span class="icon check"></span> Acción W</button>
                    <button type="button" class="button"><span class="icon check"></span></button>
                </div>
                <br>
                <br>
                <div>
                    <div class="button-group">
                        <button type="button" class="button">Acción A</button>
                        <button type="button" class="button">Acción B</button>
                    </div>
                    <div class="button-group">
                        <button type="button" class="button">Módulo 1</button>
                        <button type="button" class="button">Módulo 2</button>
                        <button type="button" class="button">Módulo 3</button>
                    </div>
                    <button class="button important blue"><span class="icon check"></span> Guardar</button>
                </div>
                <br>
<pre class="language-markup"><code class="language-markup">&lt;!-- Botón que lleva al usuario a otra página --&gt;
&lt;a href=&quot;&quot; class=&quot;button&quot;&gt;Cualquier texto&lt;/a&gt;
&lt;a href=&quot;&quot; class=&quot;button important&quot;&gt;Cualquier texto&lt;/a&gt;
&lt;a href=&quot;&quot; class=&quot;button important red&quot;&gt;Cualquier texto&lt;/a&gt;
&lt;a href=&quot;&quot; class=&quot;button important blue&quot;&gt;Cualquier texto&lt;/a&gt;
&lt;a href=&quot;&quot; class=&quot;button important blue&quot;&gt;&lt;span class=&quot;icon check&quot;&gt;&lt;/span&gt; Cualquier texto&lt;/a&gt;
&lt;a href=&quot;&quot; class=&quot;button important blue&quot;&gt;&lt;span class=&quot;icon check&quot;&gt;&lt;/span&gt;&lt;/a&gt;

&lt;!-- Botón para guardar el formulario en donde está incluído--&gt;
&lt;button type=&quot;submit&quot; class=&quot;button&quot;&gt;Cualquier texto&lt;/button&gt;
&lt;button type=&quot;submit&quot; class=&quot;button important&quot;&gt;Cualquier texto&lt;/button&gt;
&lt;button type=&quot;submit&quot; class=&quot;button important red&quot;&gt;Cualquier texto&lt;/button&gt;
&lt;button type=&quot;submit&quot; class=&quot;button important blue&quot;&gt;Cualquier texto&lt;/button&gt;
&lt;button type=&quot;submit&quot; class=&quot;button important blue&quot;&gt;&lt;span class=&quot;icon check&quot;&gt;&lt;/span&gt; Cualquier texto&lt;/button&gt;
&lt;button type=&quot;submit&quot; class=&quot;button important blue&quot;&gt;&lt;span class=&quot;icon check&quot;&gt;&lt;/span&gt;&lt;/button&gt;

&lt;!-- Botón para disparar acciones JS --&gt;
&lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Cualquier texto&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button important&quot;&gt;Cualquier texto&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button important red&quot;&gt;Cualquier texto&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button important blue&quot;&gt;Cualquier texto&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button important blue&quot;&gt;&lt;span class=&quot;icon check&quot;&gt;&lt;/span&gt; Cualquier texto&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button important blue&quot;&gt;&lt;span class=&quot;icon check&quot;&gt;&lt;/span&gt;&lt;/button&gt;

&lt;!-- Estados "seleccionado" --&gt;
&lt;!-- Estados "desactivado" --&gt;</code></pre>
            </div>
            <div class="alert alert-warning">
                Es importante tener en cuanta que si el botón de nodo "button" no va a utilizarse para guardar un formulario, entonces deberá reemplazarse el atributo type por el valor "button", así:<br>
                <strong>type="submit"</strong> ...se reemplaza por... <strong>type="button".</strong><br>
                <br>
                En el nodo "button", si el atributo "type" es omitido el atributo por default es "submit". Evitar ésta ambiguación especificando siempre el atributo "type".
            </div>
        </section>
        
        
        <section>
            <h2>Etiquetas</h2>
            <p>Para utilizar como indicadores de estado.</p>
            <span class="label">Default</span>
            <span class="label label-primary">Primary</span>
            <span class="label label-success">Success</span>
            <span class="label label-info">Info</span>
            <span class="label label-warning">Warning</span>
            <span class="label label-danger">Danger</span>
<pre class="language-markup"><code class="language-markup">&lt;span class=&quot;label&quot;&gt;Default&lt;/span&gt;
&lt;span class=&quot;label label-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;label label-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;label label-info&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;label label-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;label label-danger&quot;&gt;Danger&lt;/span&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Input (desabilitado)</h2>
            <div class="form-fields">
                <label>
                    <span class="name">Input de texto:</span>
                    <input type="text" placeholder="Ingrese aquí su texto" readonly />
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&#237; su texto&quot; readonly /&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Input</h2>
            <div class="form-fields">
                <label>
                    <span class="name">Input de texto:</span>
                    <input type="text" placeholder="Ingrese aquí su texto" id="first-input" />
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&#237; su texto&quot; /&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Input (desabilitado)</h2>
            <div class="form-fields">
                <label>
                    <span class="name">Input de texto:</span>
                    <input type="text" placeholder="Ingrese aquí su texto" readonly />
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&#237; su texto&quot; readonly /&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Textarea</h2>
            <div class="form-fields">
                <label>
                    <span class="name">Textarea:</span>
                    <textarea placeholder="Ingrese aquí su texto"></textarea>
                    <span class="icon circled-help help" data-text="Depending on project settings weekend may be included in due date calculation"></span>
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Textarea:&lt;/span&gt;
        &lt;textarea placeholder=&quot;Ingrese aqu&iacute; su texto&quot;&gt;&lt;/textarea&gt;
        &lt;span class=&quot;icon circled-help help&quot; data-text=&quot;Depending on project settings weekend may be included in due date calculation&quot;&gt;&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Select</h2>
            <div class="form-fields">
                <label>
                    <span class="name">Select:</span>
                    <select>
                        <option>Opcion 1</option>
                        <option>Opcion 2</option>
                    </select>
                    <span class="icon circled-help help" data-text="Depending on project settings weekend may be included in due date calculation"></span>
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Select:&lt;/span&gt;
        &lt;select&gt;
            &lt;option&gt;Opcion 1&lt;/option&gt;
            &lt;option&gt;Opcion 2&lt;/option&gt;
        &lt;/select&gt;
        &lt;span class=&quot;icon circled-help help&quot; data-text=&quot;Depending on project settings weekend may be included in due date calculation&quot;&gt;&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Radio</h2>
            
            <h3>Completo</h3>
            <div class="form-fields">
                <label>
                    <span class="name">Radio:</span>
                    <input type="radio" name="radio" />
                    <span class="text">Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</span>
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Radio:&lt;/span&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; /&gt;
        &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
            
            <h3>Sin texto</h3>
            <div class="form-fields">
                <label>
                    <span class="name">Radio:</span>
                    <input type="radio" name="radio" />
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Radio:&lt;/span&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; /&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
            
            <h3>Sin título</h3>
            <div class="form-fields">
                <label>
                    <input type="radio" name="radio" />
                    <span class="text">Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</span>
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; /&gt;
        &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
            
            <h3>Sin margen izquierdo</h3>
            <div class="form-fields">
                <label class="no-quote">
                    <input type="radio" name="radio" />
                    <span class="text">Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</span>
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label class=&quot;no-quote&quot;&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; /&gt;
        &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Checkbox</h2>
            
            <h3>Completo</h3>
            <div class="form-fields">
                <label>
                    <span class="name">Checkbox:</span>
                    <input type="checkbox" name="radio" />
                    <span class="text">Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</span>
                </label>
            </div>
<pre class="language-markup"><code class="language-markup"></code>&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Checkbox:&lt;/span&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;radio&quot; /&gt;
        &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
            
            <h3>Sin texto</h3>
            <div class="form-fields">
                <label>
                    <span class="name">Checkbox:</span>
                    <input type="checkbox" name="radio" />
                </label>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Checkbox:&lt;/span&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;radio&quot; /&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
            
            <h3>Sin título</h3>
            <div class="form-fields">
                <label>
                    <input type="checkbox" name="radio" />
                    <span class="text">Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</span>
                </label>
            </div>
            <pre class="language-markup">
<code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;radio&quot; /&gt;
        &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Archivos</h2>
            <div class="form-fields">
                <label>
                    <span class="name">Subir archivo:</span>
                    <button class="button icon"><span class="icon plus"></span>Subir archivo</button>
                    <button class="button flat icon"><span class="icon attach"></span>Audio 1.wav</button>
                    <button class="button flat icon"><span class="icon attach"></span>Imagen 1.jpg</button>
                </label>
            </div>
        </section>
        
        
        <section>
            <h2>Campos combinados</h2>
            <div class="form-fields">
                <label>
                    <input type="checkbox" name="radio" />
                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                    <span class="text">Laoreet dolore magna aliquam erat vold minim veniam.</span>
                </label>
                <label>
                    <input type="checkbox" name="radio" />
                    <img src="content/test-student-32x32.jpg" class="size-64x64º" />
                    <span class="text">Laoreet dolore mtpat. Ut wisi eni.</span>
                </label>
            </div>
        </section>
        
        
        <section>
            <h2>Dobles</h2>
            <div class="form-fields">
                <div class="double">
                    <label>
                        <span class="name">Input de texto:</span>
                        <input type="text" />
                    </label>
                    <label>
                        <span class="name">Input de texto:</span>
                        <input type="text" />
                    </label>
                </div>
                <div class="double right">
                    <label>
                        <span class="name">Input de texto:</span>
                        <input type="text" />
                    </label>
                    <label>
                        <span class="name">Input de texto:</span>
                        <input type="text" />
                    </label>
                </div>
                <div class="double left">
                    <label>
                        <span class="name">Input de texto:</span>
                        <input type="text" />
                    </label>
                    <label>
                        <span class="name">Input de texto:</span>
                        <input type="text" />
                    </label>
                </div>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;div class=&quot;double&quot;&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
            &lt;input type=&quot;text&quot; /&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
            &lt;input type=&quot;text&quot; /&gt;
        &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;double right&quot;&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
            &lt;input type=&quot;text&quot; /&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
            &lt;input type=&quot;text&quot; /&gt;
        &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;double left&quot;&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
            &lt;input type=&quot;text&quot; /&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
            &lt;input type=&quot;text&quot; /&gt;
        &lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Triples</h2>
            <div class="form-fields">
                <div class="triple">
                    <label>
                        <span class="name">Input de texto:</span>
                        <input type="text" />
                    </label>
                    <label>
                        <span class="name">Nombre:</span>
                        <select>
                            <option>Opcion 1</option>
                            <option>Opcion 2</option>
                        </select>
                    </label>
                    <label>
                        <span class="name">Input de texto:</span>
                        <input type="text" />
                    </label>
                </div>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;div class=&quot;triple&quot;&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
            &lt;input type=&quot;text&quot; /&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Nombre:&lt;/span&gt;
            &lt;select&gt;
                &lt;option&gt;Opcion 1&lt;/option&gt;
                &lt;option&gt;Opcion 2&lt;/option&gt;
            &lt;/select&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Input de texto:&lt;/span&gt;
            &lt;input type=&quot;text&quot; /&gt;
        &lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Campos agrupados</h2>
            <div class="form-fields">
                <div class="double">
                    <label>
                        <span class="name">Nombre:</span>
                        <input type="text" placeholder="Ingrese aquí su texto" value="Juan Martín" />
                    </label>
                    <label>
                        <span class="name">Apellido:</span>
                        <input type="text" placeholder="Ingrese aquí su texto" value="Gonzalez" />
                    </label>
                </div>
                <div class="double right">
                    <label>
                        <span class="name">Email:</span>
                        <input type="text" placeholder="Ingrese aquí su texto" value="alumno_132_guitarra@direccionemail.com" />
                    </label>
                    <label>
                        <span class="name">Edad:</span>
                        <input type="text" placeholder="Ingrese aquí su texto" value="24" />
                    </label>
                </div>
                <div class="double left">
                    <label>
                        <span class="name">Idioma:</span>
                        <input type="text" placeholder="Ingrese aquí su texto" value="ESP" />
                    </label>
                    <label>
                        <span class="name">Domicilio:</span>
                        <input type="text" placeholder="Ingrese aquí su texto" value="Andres Maria 1465" />
                    </label>
                </div>
                <label>
                    <span class="name">Intereses:</span>
                    <textarea placeholder="Ingrese aquí su texto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</textarea>
                </label>
                <label>
                    <span class="name">País:</span>
                    <select>
                        <option>Argentina</option>
                        <option>Francia</option>
                    </select>
                </label>
                <label>
                    <span class="name">Domicilio:</span>
                    <input type="text" placeholder="Ingrese aquí su texto" value="Andres Maria 1465" />
                </label>
                <label>
                    <input type="checkbox" name="radio" />
                    <span class="text">Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</span>
                </label>
                <label>
                    <input type="checkbox" name="radio" />
                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                    <span class="text">Laoreet dolore magna aliquam erat vold minim veniam.</span>
                </label>
                <label>
                    <span class="name">Adjuntar archivos:</span>
                    <button class="button icon"><span class="icon plus"></span>Subir archivo</button>
                    <button class="button flat icon"><span class="icon attach"></span>Audio 1.wav</button>
                    <button class="button flat icon"><span class="icon attach"></span>Imagen 1.jpg</button>
                </label>
                <div class="triple">
                    <label>
                        <input type="radio" name="radio" />
                        <span class="text">Opción A</span>
                    </label>
                    <label>
                        <input type="radio" name="radio" />
                        <span class="text">Opción B</span>
                    </label>
                    <label>
                        <input type="radio" name="radio" />
                        <span class="text">Opción C</span>
                    </label>
                </div>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-fields&quot;&gt;
    &lt;div class=&quot;double&quot;&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Nombre:&lt;/span&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&iacute; su texto&quot; value=&quot;Juan Mart&iacute;n&quot; /&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Apellido:&lt;/span&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&iacute; su texto&quot; value=&quot;Gonzalez&quot; /&gt;
        &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;double right&quot;&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Email:&lt;/span&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&iacute; su texto&quot; value=&quot;alumno_132_guitarra@direccionemail.com&quot; /&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Edad:&lt;/span&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&iacute; su texto&quot; value=&quot;24&quot; /&gt;
        &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;double left&quot;&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Idioma:&lt;/span&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&iacute; su texto&quot; value=&quot;ESP&quot; /&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;span class=&quot;name&quot;&gt;Domicilio:&lt;/span&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&iacute; su texto&quot; value=&quot;Andres Maria 1465&quot; /&gt;
        &lt;/label&gt;
    &lt;/div&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Intereses:&lt;/span&gt;
        &lt;textarea placeholder=&quot;Ingrese aqu&iacute; su texto&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat&lt;/textarea&gt;
    &lt;/label&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Pa&iacute;s:&lt;/span&gt;
        &lt;select&gt;
            &lt;option&gt;Argentina&lt;/option&gt;
            &lt;option&gt;Francia&lt;/option&gt;
        &lt;/select&gt;
    &lt;/label&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Domicilio:&lt;/span&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Ingrese aqu&iacute; su texto&quot; value=&quot;Andres Maria 1465&quot; /&gt;
    &lt;/label&gt;
    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;radio&quot; /&gt;
        &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/span&gt;
    &lt;/label&gt;
    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;radio&quot; /&gt;
        &lt;img src=&quot;content/test-student-32x32.jpg&quot; class=&quot;size-32x32&quot; /&gt;
        &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat vold minim veniam.&lt;/span&gt;
    &lt;/label&gt;
    &lt;label&gt;
        &lt;span class=&quot;name&quot;&gt;Adjuntar archivos:&lt;/span&gt;
        &lt;button class=&quot;button icon&quot;&gt;&lt;span class=&quot;icon plus&quot;&gt;&lt;/span&gt;Subir archivo&lt;/button&gt;
        &lt;button class=&quot;button flat icon&quot;&gt;&lt;span class=&quot;icon attach&quot;&gt;&lt;/span&gt;Audio 1.wav&lt;/button&gt;
        &lt;button class=&quot;button flat icon&quot;&gt;&lt;span class=&quot;icon attach&quot;&gt;&lt;/span&gt;Imagen 1.jpg&lt;/button&gt;
    &lt;/label&gt;
    &lt;div class=&quot;triple&quot;&gt;
        &lt;label&gt;
            &lt;input type=&quot;radio&quot; name=&quot;radio&quot; /&gt;
            &lt;span class=&quot;text&quot;&gt;Opci&oacute;n A&lt;/span&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;input type=&quot;radio&quot; name=&quot;radio&quot; /&gt;
            &lt;span class=&quot;text&quot;&gt;Opci&oacute;n B&lt;/span&gt;
        &lt;/label&gt;
        &lt;label&gt;
            &lt;input type=&quot;radio&quot; name=&quot;radio&quot; /&gt;
            &lt;span class=&quot;text&quot;&gt;Opci&oacute;n C&lt;/span&gt;
        &lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
        </section>
        
        
        <section>
            <h2>Tablas</h2>
            <div class="form-table">
                <table>
                    <thead>
                        <tr>
                            <th>Campo 1</th>
                            <th>Campo 2</th>
                            <th>Campo 3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Campo 1</td>
                            <td><a href="" class="button">Campo 1</a></td>
                            <td>Campo 3</td>
                        </tr>
                        <tr>
                            <td>Campo 1</td>
                            <td>Campo 2</td>
                            <td>Campo 3</td>
                        </tr>
                        <tr>
                            <td>Campo 1</td>
                            <td>Campo 2</td>
                            <td>Campo 3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-table&quot;&gt;
    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Campo 1&lt;/th&gt;
                &lt;th&gt;Campo 2&lt;/th&gt;
                &lt;th&gt;Campo 3&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;Campo 1&lt;/td&gt;
                &lt;td&gt;&lt;a href=&quot;&quot; class=&quot;button&quot;&gt;Campo 1&lt;/a&gt;&lt;/td&gt;
                &lt;td&gt;Campo 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Campo 1&lt;/td&gt;
                &lt;td&gt;Campo 2&lt;/td&gt;
                &lt;td&gt;Campo 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Campo 1&lt;/td&gt;
                &lt;td&gt;Campo 2&lt;/td&gt;
                &lt;td&gt;Campo 3&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code></pre>
        </section>


        <section>
            <h2>Contenedor</h2>
            <div class="form-container">
                <strong class="title">Titulo 1</strong>
                <div class="content">
                    <div class="form-fields">
                        <label>
                            <span class="name">Checkbox:</span>
                            <input type="checkbox" name="radio" />
                            <span class="text">Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</span>
                        </label>
                        <label>
                            <span class="name">Checkbox:</span>
                            <input type="checkbox" name="radio" />
                        </label>
                        <label>
                            <input type="checkbox" name="radio" />
                            <span class="text">Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</span>
                        </label>
                    </div>
                    <div class="form-buttons">
                        <input type="submit" class="button important" value="Guardar" />
                    </div>
                </div>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-container&quot;&gt;
    &lt;strong class=&quot;title&quot;&gt;Titulo 1&lt;/strong&gt;
    &lt;div class=&quot;content&quot;&gt;
        &lt;div class=&quot;form-fields&quot;&gt;
            &lt;label&gt;
                &lt;span class=&quot;name&quot;&gt;Checkbox:&lt;/span&gt;
                &lt;input type=&quot;checkbox&quot; name=&quot;radio&quot; /&gt;
                &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/span&gt;
            &lt;/label&gt;
            &lt;label&gt;
                &lt;span class=&quot;name&quot;&gt;Checkbox:&lt;/span&gt;
                &lt;input type=&quot;checkbox&quot; name=&quot;radio&quot; /&gt;
            &lt;/label&gt;
            &lt;label&gt;
                &lt;input type=&quot;checkbox&quot; name=&quot;radio&quot; /&gt;
                &lt;span class=&quot;text&quot;&gt;Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/span&gt;
            &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-buttons&quot;&gt;
            &lt;input type=&quot;submit&quot; class=&quot;button important&quot; value=&quot;Guardar&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
        </section>


        <section>
            <h2>Botonera</h2>
            <div class="form-buttons">
                <a class="button important red">Cancelar (a)</a>
                <button class="button important">Enviar (button)</button>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;form-buttons&quot;&gt;
    &lt;a class=&quot;button important red&quot;&gt;Cancelar (a)&lt;/a&gt;
    &lt;button class=&quot;button important&quot;&gt;Enviar (button)&lt;/button&gt;
&lt;/div&gt;</code></pre>
        </section>


        <section>
            <h2>Alertas</h2>
            
            <h3>Éxito</h3>
            <div class="alert alert-success">
                <span class="icon thumbs-up"></span>
                <strong>Éxito!</strong> - Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad minim veniam. 
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;alert alert-success&quot;&gt;
    &lt;span class=&quot;icon thumbs-up&quot;&gt;&lt;/span&gt;
    &lt;strong&gt;&Eacute;xito!&lt;/strong&gt; - Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad minim veniam. 
&lt;/div&gt;</code></pre>
            
            <h3>Mensaje informativo</h3>
            <div class="alert alert-message">
                <span class="icon circled-info"></span>
                <strong>Mensaje informativo</strong> - Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad minim veniam. 
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;alert alert-message&quot;&gt;
    &lt;span class=&quot;icon circled-info&quot;&gt;&lt;/span&gt;
    &lt;strong&gt;Mensaje informativo&lt;/strong&gt; - Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad minim veniam. 
&lt;/div&gt;</code></pre>
            
            <h3>Ateción</h3>
            <div class="alert alert-warning">
                <span class="icon warning"></span>
                <strong>Atención!</strong> - Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad minim veniam. 
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;alert alert-warning&quot;&gt;
    &lt;span class=&quot;icon warning&quot;&gt;&lt;/span&gt;
    &lt;strong&gt;Atenci&oacute;n!&lt;/strong&gt; - Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad minim veniam. 
&lt;/div&gt;</code></pre>
            
            <h3>Error</h3>
            <div class="alert alert-error">
                <span class="icon block"></span>
                <strong>Error!</strong> - Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad minim veniam. 
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;alert alert-error&quot;&gt;
    &lt;span class=&quot;icon block&quot;&gt;&lt;/span&gt;
    &lt;strong&gt;Error!&lt;/strong&gt; - Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad minim veniam. 
&lt;/div&gt;</code></pre>
            
            <h3>Error con lista de campos implicados</h3>
            <div class="alert alert-error">
                <span class="icon block"></span>
                <strong>Se han encontrado errores:</strong>
                <ul>
                    <li><label for="first-input">Nombre</label></li>
                    <li><label for="first-input">Apellido</label></li>
                    <li><label for="first-input">Huso horario</label></li>
                    <li><label for="first-input">Teléfono</label></li>
                </ul>
            </div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;alert alert-error&quot;&gt;
    &lt;span class=&quot;icon block&quot;&gt;&lt;/span&gt;
    &lt;strong&gt;Se han encontrado errores:&lt;/strong&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;label for=&quot;first-input&quot;&gt;Nombre&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;label for=&quot;first-input&quot;&gt;Apellido&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;label for=&quot;first-input&quot;&gt;Huso horario&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;label for=&quot;first-input&quot;&gt;Tel&eacute;fono&lt;/label&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>
        </section>


        <section>
            <h2>Sección &amp; acción inválida</h2>
            <div class="message">
                <strong>Página no encontrada!</strong>
                <p>
                    Uam erat volutpat aliquam erat volutpat. Ut wisi enim ad <a href="">minim</a> veniam. Laoreet dolore magna aliquam erat volutpat. Enim ad minim veniam.
                </p>
                <a href="" class="button important">OK</a>
            </div>
        </section>
    </body>
</html>
